05. Extracting Properties and Values

Object Methods

Do you remember earlier when we used the Object() constructor function to create (i.e., instantiate) new objects with the new keyword?

const myNewFancyObject = new Object();

The Object() function actually includes a few methods of its own to aid in the development of your applications. These methods are:

  • Object.keys()
  • Object.values()

Whether you're building logic in your code, or just writing a utility "helper" function, feel free to use these methods as necessary. Let's see how each of these work!

Object.keys() and Object.values()

At its core, an object is just a collection of key/value pairs. What if we want to extract only the keys from an object? Say we have this object representing a real-life dictionary:

const dictionary = {
  car: 'automobile',
  apple: 'healthy snack',
  cat: 'cute furry animal',
  dog: 'best friend'
};

Having a collection of just the words (i.e., the dictionary object's keys) may be particularly useful. While we could use a for...in loop to iterate through an object and build our own list of keys, it can get a bit messy and verbose. Thankfully, JavaScript provides an abstraction just for this!

When Object.keys() is given an object, it extracts just the keys of that object, then returns those keys in an array:

Object.keys(dictionary);

// ['car', 'apple', 'cat', 'dog']

So Object.keys() gives returns an array of the provided object's property names. Likewise, if we want a list of the values of an object, we can use Object.values():

Object.values(dictionary);

// ['automobile', 'healthy snack', 'cute furry animal', 'best friend']

Excellent! Let's see it all in action.

L1 -68 - Object Keys And Object Values Demo V1

Support for Object.keys() and Object.values()

Object.keys() has been around for quite a long time, so it is fully supported by every browser.

Object.values(), on the other hand, is significantly newer. It was officially added to the language specification in 2017. However, just because it's been added to the specification, it necessarily doesn't mean your browser supports it yet!

How do you know if your browser does support Object.values()? Check out the Browser Compatibility table!

What is true about Object.keys()? Select all that apply.
SOLUTION:
  • The resulting array's elements are strings
  • The order of the array's elements are in the same order as using a `for` loop.

What is true about Object.values()? Select all that apply.
SOLUTION:
  • The order of the array's elements are in the same order as using a `for` loop.

QUESTION:

Write an expression using Object.keys() to extract the keys (i.e., property names) from the triangle object:

const triangle = {
  type: 'polygon',
  sides: 3,
  sumOfAngles: 180,
  equilateral: true,
  equiangular: true
};

SOLUTION:

NOTE: The solutions are expressed in RegEx pattern. Udacity uses these patterns to check the given answer

Summary

The Object() constructor function has access to several methods to aid in development. To extract property names and values from an object, we can use:

  • Object.keys() returns an array of a given object's own keys (property names).
  • Object.values() returns an array of a given object's own values (property values).

Further Research

Next Concept